<template>
  <div class="goodFrom">
    <el-form
      ref="form"
      class="add-product-form"
      :model="form"
      label-width="110px"
      :rules="rules"
    >
      <el-form-item label="商品图片" prop="pic_url">
        <el-input
          v-model="form.pic_url"
          name="pic_url"
          style="width: 50%"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="form.name" style="width: 50%" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input
          v-model="form.price"
          style="width: 50%"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="品牌名称" prop="brand">
        <el-input
          v-model="form.brand"
          style="width: 50%"
          :disabled="disabled"
        />
      </el-form-item>
      <!-- 级联选择器 -->
      <el-form-item label="商品分类" prop="brand">
        <el-cascader
          :disabled="disabled"
          style="width: 50%"
          v-model="cascaderValue"
          :options="options"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item label="商品简介" prop="detail_info">
        <el-input
          v-model="form.detail_info"
          type="textarea"
          style="width: 50%"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="商品库存" prop="stock">
        <el-input
          v-model="form.stock"
          style="width: 50%"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="商品标签" prop="tags">
        <el-input v-model="form.tags" style="width: 50%" :disabled="disabled" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="disabled" @click="onSubmit">提交</el-button>
        <el-button @click="canCel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { categoryLevel } from "@/api/category";
import { addGoods, editGoods, detailGoods } from "@/api/goods";
import getOptions from '@/utils/getOptions'
export default {
  name: "Detail",
  data() {
    return {
      //表单收集的数据
      form: {
        pic_url: "",
        tags: "",
        stock: "",
        name: "",
        brand: "",
        price: "",
        detail_info: "",
        level1_category_id: "",
        level2_category_id: "",
        level3_category_id: "",
      },
      cascaderValue: [],//级联选择器收集的数据
      options: [],
      disabled: false, //查看详情禁用状态
      //表单校验
      rules: {
        pic_url: [
          { required: true, message: "请输入图片地址", trigger: "submit" },
        ],
        name: [
          { required: true, message: "请输入商品名称", trigger: "submit" },
        ],
        brand: [
          { required: true, message: "请输入品牌名称", trigger: "submit" },
        ],
        price: [
          { required: true, message: "请输入商品价格", trigger: "submit" },
        ],
        detail_info: [
          { required: true, message: "请输入商品简介", trigger: "submit" },
        ],
        tags: [
          { required: true, message: "请输入商品标签", trigger: "submit" },
        ],
        stock: [
          { required: true, message: "请输入商品库存", trigger: "submit" },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      //提交表单
      this.$refs.form.validate(async (value) => {
        if (value) {
          //判断编辑还是添加
          if (this.$route.query.id) {
            //编辑
            await editGoods({ ...this.form, id: this.$route.query.id });
            this.$message({
              type: "success",
              message: "编辑成功!",
            });
          } else {
            //添加
            await addGoods(this.form);
            this.$message({
              type: "success",
              message: "添加成功!",
            });
          }
          this.$router.back();
          this.$store.dispatch("tagsView/delVisitedView", this.$route);
        }
      });
    },
    //级联选择器发生变化触发的事件
    handleChange(value) {
      this.form.level1_category_id = value[0];
      this.form.level2_category_id = value[1];
      this.form.level3_category_id = value[2] || "";
    },
    //取消
    canCel() {
      this.$router.back();
      this.$store.dispatch("tagsView/delVisitedView", this.$route);
    },
  },
  async created() {
    let res = await categoryLevel({ limit: 10, page: 1 });
    //后端返回的数据改成 组件需要的数据
    let arr = getOptions(res.data.list);
    this.options = arr;
  },
  async mounted() {
    //判断编辑还是添加
    if (this.$route.query.id) {
      //数据回溯
      let { data } = await detailGoods({ id: this.$route.query.id });
      this.form = data;
      this.cascaderValue = [
        data.level1_category_id,
        data.level2_category_id,
        data.level3_category_id,
      ];
    }
    //仅查看
    if (this.$route.query.type) {
      this.disabled = true;
    }
  },
};
</script>

<style scoped lang="scss">
.add-product-form {
  width: 98%;
  margin: 20px auto;
}
</style>